<template>
	<el-dialog :title="$t('basProcess.bindView')"  v-model="visible" style="width: 90%" :close-on-click-modal="false" @opened="opened">
			<splitpanes style="height: 700px">
				<pane size="49">
					<el-tabs model-value="first" class="card-tabs">
						<el-tab-pane name="first" >
							<template #label>
								<span class="ml-0.5">
									<el-icon>
										<calendar />
									</el-icon>
									{{ $t('basProcess.location') }}
								</span>
							</template>
							<div class="layout-padding-auto layout-padding-view" >
								<el-form class="mb-2">
									<el-form-item>
										<el-button icon="el-icon-plus"  type="primary" @click="addPrdlineClick(selectObjs)">{{ $t('basProcess.bind') }} </el-button>
									</el-form-item>
								</el-form>

								<el-table
									:data="state.dataList"
									v-loading="state.loading"
									highlight-current-row
									border
									:fit="true"
									:cell-style="tableStyle.cellStyle"
									:header-cell-style="tableStyle.headerCellStyle"
									@sort-change="sortChangeHandle"
									stripe
									@selection-change="selectionChangeHandle"
								>
									<el-table-column type="selection" width="40" align="center" />
									<el-table-column type="index" label="#" width="50" />
									<el-table-column  prop="locationCode" :label="$t('basProcess.locationCode')" show-overflow-tooltip/>
									<el-table-column  prop="locationName" :label="$t('basProcess.locationName')" show-overflow-tooltip/>
									<!-- <el-table-column width="130" prop="locationTypeName" :label="$t('basProcess.locationTypeName')" show-overflow-tooltip/> -->
									<el-table-column width="210" prop="locationTypeCode" :label="$t('basProcess.locationTypeCode')" show-overflow-tooltip>
										<template #default="scope">
											<el-button-group size="small">
												<el-button type="success" class="w-[110px]">{{scope.row.locationTypeCode}}</el-button>
												<el-button type="success" class="w-[70px]" plain>{{scope.row.locationTypeName}}</el-button>
											</el-button-group>
										</template>
									</el-table-column>
								</el-table>
								<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
							</div>
						</el-tab-pane>
					</el-tabs>
				</pane>
				<pane size="2">
					<el-divider direction="vertical" border-style="dashed" style="height: 100%;margin-left: 50%" />
				</pane>
				<pane size="49">
					<el-tabs model-value="first" class="card-tabs">
						<el-tab-pane name="first" >
							<template #label>
								<span class="ml-0.5">
									<el-icon>
										<calendar />
									</el-icon>
									{{ $t('basProcess.productionLine') }}
								</span>
							</template>
							<div class="layout-padding-auto layout-padding-view ">
								<bindlineForm ref="dataFormRef" />
							</div>
						</el-tab-pane>
					</el-tabs>
				</pane>
			</splitpanes>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false" icon="Close">{{ $t('basProcess.cancel') }}</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading" icon="Check">{{ $t('basProcess.confirm') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import bindlineForm from '/src/views/digital/basProcess/bindlineForm.vue';
import { bindProcessLineLocation, getLocationLists } from '/@/api/platform/digital/basProcess';
import { useMessage } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
let roductionLine_Code = '';
let productionLine_Name = '';
const visible = ref(false);
let prdlineid = '';
let warehouseId = '';
const dataFormRef = ref();
const loading = ref(false);
const emit = defineEmits(['refresh']);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getLocationLists,
});
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
// 多选事件
const selectionChangeHandle = (objs: []) => {
	selectObjs.value = objs;
	multiple.value = !objs.length;
};

const opened = () => {
	dataFormRef.value.refresh(prdlineid, roductionLine_Code, productionLine_Name);
};

// 打开弹窗
const openDialog = (id: any, whId: any, row: any, productionLineCode: any, productionLineName: any) => {
	visible.value = true;
	state.queryForm.prdlineid = id;
	prdlineid = id;
	state.queryForm.warehouseId = whId;
	roductionLine_Code = productionLineCode;
	productionLine_Name = productionLineName;
	getDataList();
};

//新增按钮
const addPrdlineClick = (row: any) => {
	if (row?.length === 0) {
		return useMessage().error(t('basProcess.selectLocation'));
	}
	//点击新增左边的库位要在表格中删掉
	row.forEach((element) => {
		var index = state.dataList?.map((m) => m.locationCode).indexOf(element.locationCode);
		if (index !== -1) {
			state.dataList.splice(index, 1);
		}
	});
	//给表格右边产线加一行
	dataFormRef.value.addrefresh(row, roductionLine_Code, productionLine_Name);
};

// 提交
const onSubmit = async () => {
	const data = dataFormRef.value.getdataformlist();
	// const valid = await data.value.validate().catch(() => {
	// });
	// if (!valid) return false;

	try {
		loading.value = true;
		await bindProcessLineLocation({
			Prdlineid: prdlineid,
			processLineLocation: data,
		});
		useMessage().success(t('basProcess.submitSuccess'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
// 暴露变量
defineExpose({
	openDialog,
});
</script>